<template>
	<view>
		<fa-navbar title="刷题"></fa-navbar>
		<view class="content">
			<view class="container">
				<!-- 系统标题 -->
				<view class="header">
					<text v-if="majorDetail.name" class="sub-title">{{majorDetail.name}}</text>
					<text v-else class="sub-title">请选择科目</text>
					<u-icon name="list" size="32" color="#333333" @click="courseShow=true"></u-icon>
				</view>

				<!-- 功能模式 -->
				<view class="u-flex u-flex-wrap mode-grid">
					
					<view class="classify-item-box" @click="openMode(1)">
						<view class="u-flex mode">
							<view class="icon tn-bg-green tn-shadow-blur">
								<u-icon name="eye" size="50" color="#ffffff"></u-icon>
							</view>
							<text>背题模式</text>
						</view>
					</view>
					
					<view class="classify-item-box" @click="openMode(2)">
						<view class="u-flex mode">
							<view class="icon tn-bg-blue">
								<u-icon name="edit-pen" size="50" color="#ffffff"></u-icon><strong></strong>
							</view>
							<text>练题模式</text>
						</view>
					</view>
					
					<view class="classify-item-box" @click="openMode(3)">
						<view class="u-flex mode">
							<view class="icon tn-bg-orange">
							<u-icon name="file-text" size="50" color="#ffffff"></u-icon>
							</view>
							<text>模拟考试</text>
						</view>
					</view>
					
					<view class="classify-item-box" @click="openWrong()">
						<view class="u-flex mode">
							<view class="icon tn-bg-red">
							<u-icon name="close-circle" size="50" color="#ffffff"></u-icon>
							</view>
							<text>我的错题</text>
						</view>
					</view>
				</view>

				<!-- 模拟考试 -->
				<view class="exam-section">
					<view class="section-header">
						<text class="section-title">模拟考试</text>
						<text class="more-link" @click="navToExam">更多 ></text>
					</view>
					<!-- 考试内容可以在这里扩展 -->
					<view class="jnpx">
						
						<view class="classes">
							<view class="items" v-for="(item,index) in classesList" :key="index" @click="openAnswer(item)">
								<view class="">
									<u-image width="339" height="254" :src="item.image" radius="20rpx 20rpx 0 0"></u-image>
								</view>
								<view class="info">
									<view class="kbsj">
										{{item.name}}
									</view>
									<view class="bmxx">
										立即练习
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 课程分类 -->
		<u-popup :show="courseShow" mode="left" @close="closeCourse" :customStyle="{width:'660rpx'}">
			<view class="up-category">
				<view class="title">
					<text>试题分类</text>
				</view>
				<view class="major">
					<view class="item" v-for="(item,index) in collegeList" :key="index">
						<view class="xueyuan">
							<u-line class="u-line" margin="0 18rpx 0 0" :hairline="false" :color="theme.bgColor" direction="col"></u-line>
							<text>{{item.name}}</text>
						</view>
						<view class="zye">
							<block v-for="(item1,index1) in item.major" :key="index1">
								<text @click="clickCategory1(item1)" :class="item1.id==major_id?'major-active':''">{{item1.name}}</text>
							</block>
							
						</view>
					</view>
					
				</view>
				<view class="btn">
					<u-button text="取消" shape="circle" 
					:customStyle="{'background-color':'#AEB6C2','color':'#ffffff','width':'180rpx','height':'68rpx','line-height':'68rpx'}"
					@click="closeMajor"></u-button>
					<u-button text="确认" shape="circle"
					:customStyle="{'background-color':'#0052D9','color':'#ffffff','width':'360rpx','height':'68rpx','line-height':'68rpx','margin-left':'24rpx'}"
					@click="okMajor"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: '',
				classesList:[],
				collegeList:[],
				courseShow:false,
				major_id:0,
				majorDetail:[],
			}
		},
		onLoad() {
			// this.getClassesList()
			this.getCollegeList()
		},
		methods: {
			clickCategory1(e){
				this.major_id = e.id
				this.majorDetail.name = e.name
				
			},
			closeMajor(){
				this.courseShow = false
				this.major_id = 0
				this.page = 1
				// this.getCourseList()
			},
			okMajor(){
				// let that = this
				this.courseShow = false
				this.getClassesList()
			},
			getCollegeList(){
				this.$api.getPaperList({}).then((res)=>{
					if(res.code){
						this.collegeList = res.data.collegeList
						this.classesList = res.data.categoryList
						this.majorDetail = res.data.majorDetail
						this.major_id=this.majorDetail.id
					}
				})
			},
			getClassesList() {
				this.$api.getExamCategory({params:{page:this.page,major_id:this.major_id}}).then((res)=>{
					if(res.code){
						// if (this.page === 1) {
						// 	this.classesList = [];
						// }
						this.classesList = res.data
						// let classesList = res.data.data
						// let pageList = res.data
						// this.has_more = pageList.current_page < pageList.last_page;
						// this.classesList = [...this.classesList, ...classesList];
					}
				})
			},
			handleSubject(subject) {
				uni.showToast({
					title: `选择科目：${subject}`,
					icon: 'none'
				})
			},
			switchMode(mode) {
				uni.showToast({
					title: `切换模式：${mode}`,
					icon: 'none'
				})
			},
			navToExam() {
				uni.navigateTo({
					url: '/pages/exam/list'
				})
			},
			openAnswer(item){
				uni.$u.route({
					url: '/pages/question/answer',
					params:{category_id: item.id,majorId:this.major_id,mode:3},
				})
				return
			},
			openMode(mode){
				uni.$u.route({
					url: '/pages/question/majors',
					params:{mode: mode,majorId:this.major_id},
				})
				return
			},
			openWrong(){
				uni.$u.route({
					url: '/pages/question/wrong',
					params:{},
				})
				return
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 188rpx;
	}
	.container {
		padding: 20rpx 30rpx;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 24rpx 0 40rpx 0;
		.sub-title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
		}
		/deep/ .u-icon{
			
			margin-left: 20rpx !important;
		}
	}

	.subject-list {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.subject-item {
			flex: 1;
			margin: 0 15rpx;
			padding: 30rpx 0;
			text-align: center;
			background: #f5f5f5;
			border-radius: 12rpx;
			font-size: 30rpx;
			color: #333;

			&:active {
				background: #e5e5e5;
			}
		}
	}

	.search-box {
		display: flex;
		margin-bottom: 40rpx;

		.search-input {
			flex: 1;
			padding: 20rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx 0 0 8rpx;
			font-size: 28rpx;
		}

		.search-btn {
			width: 160rpx;
			border-radius: 0 8rpx 8rpx 0;
			background: #007AFF;
			color: white;
			font-size: 28rpx;
			line-height: 2.2;
		}
	}

	.mode-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
		margin-bottom: 40rpx;
		.classify-item-box{
			.mode{
				align-items: center;
				flex-direction: column;
				.icon{
					display: flex;
					align-content: center;
					justify-content: center;
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-bottom: 16rpx;
					box-shadow: 0px 5px 5px #888888;
					
				}
				.tn-bg-green{
					background-color: #31e749 !important;
				}
				.tn-bg-blue{
					background-color: #3d7eff !important;
				}
				.tn-bg-orange{
					background-color: #ffa726 !important;
				}
				
				.tn-bg-red{
					background-color: #ff5252 !important;
				}
				.tn-shadow-blur::before {
				    content: " ";
				    display: block;
				    background: inherit;
				    -webkit-filter: blur(5px);
				    filter: blur(5px);
				    position: absolute;
				    // width: 100%;
				    // height: 100%;
				    top: 5px;
				    left: 5px;
				    z-index: -1;
				    opacity: .4;
				    -webkit-transform-origin: 0 0;
				    transform-origin: 0 0;
				    border-radius: inherit;
				    -webkit-transform: scale(1);
				    transform: scale(1);
				}
			}
		}
		.mode-item {
			padding: 30rpx;
			background: #f8f8f8;
			border-radius: 12rpx;
			text-align: center;

			&:active {
				background: #e8e8e8;
			}

			.mode-text {
				font-size: 30rpx;
				color: #333;
			}
		}
	}

	.notice-box {
		padding: 20rpx;
		background: #fff9e6;
		border-radius: 8rpx;
		margin-bottom: 40rpx;

		.notice-icon {
			margin-right: 15rpx;
		}

		.notice-text {
			font-size: 26rpx;
			color: #666;
		}
	}

	.exam-section {
		.section-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			padding: 20rpx;
			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			.more-link {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
	
	.classes{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.items{
			margin-top: 24rpx;
			.info{
				background-color: #ffffff;
				border-radius: 0 0 20rpx 20rpx;
				padding: 24rpx;
				.kbsj{
					font-size: 30rpx;
					font-weight: 600;
					color: #000000;
					text-align: center;
				}
				.bmxx{
					margin-top: 14rpx;
					background-color: #007AFF;
					border-radius: 10rpx;
					text-align: center;
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin: 14rpx auto;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
	}
	
	.up-category{
		padding: 88rpx 48rpx 0 48rpx;
		.title{
			font-size: #000000;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 24rpx;
		}
		.major{
			
			/deep/ .u-line {
				height: 28rpx !important;
				border-left-width: 6rpx !important;
				// color: #333333;
			}
			.item{
				.xueyuan{
					display: flex;
					align-items: center;
					margin-top: 24rpx;
				}
				.zye{
					display: flex;
					flex-wrap: wrap;
					text{
						background-color: #F3F5F8;
						padding: 16rpx 18rpx;
						font-size: 26rpx;
						color: #666666;
						margin-right: 24rpx;
						border-radius: 10rpx;
						margin-top: 24rpx;
					}
				}
			}
		}
		.btn{
			display: flex;
			position: absolute;
			bottom: 40rpx;
			left:24rpx;
			right: 24rpx;
		}
		.major-active{
			background-color: #E2EDFF !important;
			border: 1rpx solid #0052D9;
			color: #0052D9;
		}
	}
</style>